﻿<!DOCTYPE html>
<html>
  <head>
    <!-- meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=2.0, maximum-scale=4.0, minimum-scale=1.0" / -->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Cordova</title>
    <link rel="stylesheet" href="master.css" type="text/css" media="screen"/>



    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>


<script type="text/javascript" charset="utf-8">

    var deviceReady = false;

    function roundNumber(num) {
        var dec = 3;
        var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
        return result;
    }

    //-------------------------------------------------------------------------
    // Compass
    //-------------------------------------------------------------------------
    var watchCompassId = null;

    /**
     * Start watching compass
     */
    var watchCompass = function() {
        console.log("watchCompass()");

        // Success callback
        var success = function(a){
            document.getElementById('compassHeading').innerHTML = roundNumber(a);
        };

        // Fail callback
        var fail = function(e){
            console.log("watchCompass fail callback with error code "+e);
            stopCompass();
            setCompassStatus(Compass.ERROR_MSG[e]);
        };

        // Update heading every 1 sec
        var opt = {};
        opt.frequency = 1000;
        watchCompassId = navigator.compass.watchHeading(success, fail, opt);

        setCompassStatus("Running");
    };

    /**
     * Stop watching the acceleration
     */
    var stopCompass = function() {
        setCompassStatus("Stopped");
        if (watchCompassId) {
            navigator.compass.clearWatch(watchCompassId);
            watchCompassId = null;
        }
    };

    /**
     * Get current compass
     */
    var getCompass = function() {
        console.log("getCompass()");

        // Stop compass if running
        stopCompass();

        // Success callback
        var success = function(a){
            document.getElementById('compassHeading').innerHTML = roundNumber(a);
        };

        // Fail callback
        var fail = function(e){
            console.log("getCompass fail callback with error code "+e);
            setCompassStatus(Compass.ERROR_MSG[e]);
        };

        // Make call
        var opt = {};
        navigator.compass.getCurrentHeading(success, fail, opt);
    };

    /**
     * Set compass status
     */
    var setCompassStatus = function(status) {
        document.getElementById('compass_status').innerHTML = status;
    };

    /**
     * Function called when page has finished loading.
     */
    function init() {
        document.addEventListener("deviceready", function() {
                deviceReady = true;
                console.log("Device="+device.platform+" "+device.version);
            }, false);
        window.setTimeout(function() {
        	if (!deviceReady) {
        		alert("Error: Cordova did not initialize.  Demo will not run correctly.");
        	}
        },1000);
    }

</script>

  </head>
  <body onLoad="init();" id="stage" class="theme">

    <h1>Compass</h1>
    <div id="info">
        Status: <span id="compass_status">Stopped</span>
        <table width="100%"><tr>
            <td width="33%">Heading: <span id="compassHeading"> </td>
        </tr></table>
    </div>
    <h2>Action</h2>
    <a href="#" class="btn large" onClick="getCompass();">Get Compass</a>
    <a href="#" class="btn large" onClick="watchCompass();">Start Watching Compass</a>
    <a href="#" class="btn large" onClick="stopCompass();">Stop Watching Compass</a>
    <h2> </h2><a href="index.html" class="backBtn">Back</a>
  </body>
</html>